<template>
    <div>
        <!-- 头部面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/wlecome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/orders'}">订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容嘻嘻嘻" v-model="serch_input" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="seach_orders_onfun" ></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!-- 用户列表 -->
            <el-table
            :data="order_list"
            stripe
            border
            fit
            style="width: 100%; margin-top: 20px">
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column
                prop="order_number"
                label="订单编号">
            </el-table-column>
            <el-table-column
                prop="order_price"
                label="订单价格">
            </el-table-column>
            <el-table-column label="是否付款">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.order_pay == '0'" type="danger">{{'未付款'}}</el-tag>
                    <el-tag v-else type="success">{{'已付款'}}</el-tag>
                </template>
            </el-table-column> 
            <el-table-column
                prop="is_send"
                label="是否发货">
            </el-table-column>
            <el-table-column label="下单时间">
                <template slot-scope="scope">
                    {{comp_time(scope.row.create_time)}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-button @click="Edit_address_onfun" size="mini" type="primary" icon="el-icon-edit"></el-button>
                    <el-button size="mini" type="success" icon="el-icon-location"></el-button>
                </template>
            </el-table-column>
            </el-table>

            <!-- 列表分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="req_listsdata_infor.pagenum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="req_listsdata_infor.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 修改地址的对话框 -->
        <el-dialog
            @close="close_eidt_adrss_onfun"
            title="修改地址"
            :visible.sync="is_show_Edit_adress"
            width="50%">
            <el-form ref="Eidt_adress_form_ref" :rules="Eidt_adress_form_rules" :model="Eidt_adress_form_data" label-width="80px">
                <el-form-item label="省市/区县" prop="adress1">
                    <el-cascader
                        class="city_cascader"
                        expand-trigger="hover"
                        :options="citydata"
                        v-model="Eidt_adress_form_data.adress1"
                        :props="my_citi_cascader_config">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详情地址" prop="adress2">
                    <el-input v-model="Eidt_adress_form_data.adress2" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="is_show_Edit_adress = false">取 消</el-button>
                <el-button type="primary" @click="is_show_Edit_adress = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 订单追踪的对话框{时间线} -->
        <el-dialog
            title="订单追踪"
            :visible.sync="is_show_order_current"  
            width="50%">
            <!-- 时间线组件 -->
            <span>1</span>
            <!-- <el-timeline>
                <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp">
                {{activity.content}}
                </el-timeline-item>
            </el-timeline> -->
        </el-dialog>
    </div>
</template>

<script>
    import computed_time from '../my_js/computed_time.js';
    import citydata from '../my_js/citydata.js';

    export default {
        name:'orders',
        data () {
            return {
                order_list: [],
                total:0,
                req_listsdata_infor:{
                    query:'',
                    pagenum:1,
                    pagesize:10
                },
                serch_input:'',
                // 是否显示修改地址的对话框
                is_show_Edit_adress: false,
                // 表单信息
                Eidt_adress_form_data:{
                   adress1:[],
                   adress2:'' 
                },
                Eidt_adress_form_rules:{
                    adress2: [
                        { required: true, message: '请输入详情地址', trigger: 'blur' }
                    ]
                },
                // 城市数据
                citydata,
                // 级联配置对象
                my_citi_cascader_config: {
                    value: 'value',
                    lable: 'lable',
                    children: 'children'
                },
                // 是否显示订单追踪的对话框
                is_show_order_current: false,
                // 订单追踪的数据列表
                order_current_list: []
            }
        },
        methods: {
            //   调用后台接口 获取订单列表数据
            async get_orders_lists_fun() {
                const {data:res_data} = await this.$axios.get('orders', {
                    params:this.req_listsdata_infor
                });
                if(res_data.meta.status !== 200) { return this.$Message.error('出错啦'); }
                this.order_list = res_data.data.goods;
                this.total = res_data.data.total;
                return this.$Message.success('获取成功'); 
            },
            // 调用处理时间的函数
            comp_time(creat_time) {
                const show_time = computed_time(creat_time);
                return show_time;
            },
            // 每页显示条数发生改变触发
            handleSizeChange(new_size) {
                this.req_listsdata_infor.pagesize = new_size;
                this.get_orders_lists_fun();
            },
            // 当前页发生改变触发
            handleCurrentChange(new_pagenum) {
                this.req_listsdata_infor.pagenum = new_pagenum;
                this.get_orders_lists_fun();
            },
            seach_orders_onfun() {
                this.req_listsdata_infor.query = this.serch_input;
                if(this.serch_input.trim() == '') {
                    return this.$Message.error('输入不能为空!');
                }
                this.get_orders_lists_fun();
            },
            // 显示修改地址对话框
            Edit_address_onfun() {
                this.is_show_Edit_adress = true;
            },
            // 当关闭对话框的时候调用的函数
            close_eidt_adrss_onfun() {
                this.$refs.Eidt_adress_form_ref.resetFields();
            },
            // 显示订单追宗对话框
            Toview_order_current_onfun() {
                console.log(1);
                this.$axios.get('/kuaidi/1106975712662').then((res_data) => {
                    if(res_data.meta.status !== 200) return this.$Message.error('获取数据失败'); 
                    console.log(res_data);
                })
                this.is_show_order_current = true;
            }
        },
        mounted () {
            // 调用函数发送请求
            this.get_orders_lists_fun();
        }
    }
</script>

<style>
    .el-card {
        margin-top: 10px;
    }
    .city_cascader {
        width: 100%;
    }
</style>